<template>
    <ZZDialog class="queryroute" title="路线导航" @close="callbackClose()">
        <el-form style="padding: 10px;">
            <el-form-item label="方式">        
                <el-select v-model="routeType" placeholder="请选择">
                    <el-option
                    v-for="item in routeoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="起点" >        
                {{startPoint[0] + "," + startPoint[1]}}
                <el-button size="mini" style="margin-left: 10px;" @click="drawPoint('start')">选点</el-button>
            </el-form-item>
            <el-form-item label="终点">        
                {{endPoint[0] + "," + endPoint[1]}}
                <el-button size="mini" style="margin-left: 10px;" @click="drawPoint('end')">选点</el-button>
            </el-form-item>
            <el-collapse>
            <el-collapse-item title="路线详情" name="1">
                <div>总距离：{{allDistance}}</div>
                <div>预计时间：{{ allTime }}</div>
                <div>导航：{{ allText }}</div>
            </el-collapse-item>
        </el-collapse>
        </el-form>
    </ZZDialog>
</template>

<script>
import ZZDialog from '../../../common/ZZDialog.vue';
import startImg from "./img/start.png";
import endImg from "./img/end.png";
export default {
    components:{
        ZZDialog
    },
    data(){
        return{
            viewer:undefined,
            routeoptions:[
                {value:1,label:'步行路线查询'},
                {value:2,label:'骑行路线查询'},
                {value:3,label:'驾车路线查询'}
            ],
            routeType:1,
            startPoint:[0,0],
            endPoint:[0,0],
            allTime:'',
            allDistance:'',
            allText:''
        }
    },
    beforeMount(){
        this.viewer = this.$store.state.viewer
    },
    mounted(){
        this.gaodeRoute = new GaodeRoute()
    },
    methods:{
        drawPoint(type) {
            this.viewer.zz.draw.startDraw({
                type: "billboard",
                style: {
                    image: type=='start'? startImg:endImg
                },
                success: (entity)=> {
                    var cartesian = entity.position.getValue();
                    var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
                    var jd = Number(Cesium.Math.toDegrees(cartographic.longitude).toFixed(6));
                    var wd = Number(Cesium.Math.toDegrees(cartographic.latitude).toFixed(6));
                    if (type == "start") {
                        this.startPoint = [jd, wd];
                        if (this.startMarker) {
                            this.viewer.zz.draw.deleteEntity(entity);
                            this.startMarker.position = cartesian;
                        } else {
                            this.startMarker = entity;
                        }
                    } else {
                        this.endPoint = [jd, wd];
                        if (this.endMarker) {
                            this.viewer.zz.draw.deleteEntity(entity);
                            this.endMarker.position = cartesian;
                        } else {
                            this.endMarker = entity;
                        }
                    }
                    this.queryRoute()
                }
            });
        },
        queryRoute() {
            if (!this.startPoint || !this.endPoint) {
                return;
            }
            if (this.line) {
                this.viewer.entities.remove(this.line);
                this.line = null;
            }
            this.gaodeRoute.query({
                type: this.routeType,
                points: [this.startPoint, this.endPoint],
                success: (data)=> {
                    this.line = this.addLine(data.paths[0]);
                    this.showResult(data);
                },
                error: (msg)=> {
                    console.log('msg: ', msg);
                }
            });
        },
        showResult(data) {
            this.allTime = this.formatTime(data.paths[0].allDuration)
            this.allDistance = (Number(data.paths[0].allDistance) / 1000).toFixed(2) +'公里'

            var dhHtml = "";
            for (var i = 0; i < data.paths[0].steps.length; i++) {
                var item = data.paths[0].steps[i];
                dhHtml += item.instruction + "；";
            }
            dhHtml = dhHtml.slice(0, -1) + "。";
            this.allText = dhHtml
        },
        addLine(arg) {
            var lnglats = arg.points;
            if (!lnglats || lnglats.length < 1) return;

            var positions = zz3d.pointconvert.lonlats2cartesians(lnglats);

            var time = arg.allDuration;
            var distance = arg.allDistance;
            var html = '<div>总距离：' + distance + '<br/>所需时间：' + time + '</div>';

            return this.viewer.entities.add({
                polyline: {
                    positions: positions,
                    clampToGround: true,
                    material: Cesium.Color.AQUA.withAlpha(0.8),
                    width: 5
                },
                popup: html
            });
        },
        formatTime(seconds) {
            const hours = Math.floor(seconds / 3600);
            const minutes = Math.floor((seconds % 3600) / 60);

            let result = '';
            if (hours > 0) {
            result += `${hours}小时`;
            }
            if (minutes > 0) {
            result += `${minutes}分`;
            }
            return result;
        },
        callbackClose() {
            if (this.startMarker) {
                this.viewer.zz.draw.deleteEntity(this.startMarker);
                this.startMarker = null;
            }
            if (this.endMarker) {
                this.viewer.zz.draw.deleteEntity(this.endMarker);
                this.endMarker = null;
            }
            if (this.line) {
                this.viewer.entities.remove(this.line);
                this.line = null;
            }
            this.$emit('close')
        }
    }
        
}

</script > 
<style scoped>
.queryroute {
    position: absolute;
    top: 100px;
    right: 200px;
    height: 295px;
    width: 300px;
    overflow-y: auto;
}
</style>